import React, { useState } from 'react'
import { Menu, ConfigProvider, Avatar } from 'antd';
import './index.less'
const menuItems = [
  {
    label: '首页',
    key: '1'
  },
  {
    label: '数据',
    key: '2',
    children: [
      {
        label: '数据列表',
        key: '2-1'
      },
      {
        label: '数据源',
        key: '2-2'
      }
    ]
  },
  {
    label: '影像服务管理',
    key: '3'
  },
  {
    label: '矢量服务管理',
    key: '4'
  },
  {
    label: '地形服务管理',
    key: '5'
  },
  {
    label: '任务',
    key: '6'
  },
  {
    label: '配置管理',
    key: '7'
  },
  {
    label: '素材',
    key: '8'
  }
]
const themeConfig = {
  components: {
    Menu: {
      darkItemBg: '#252b3a',
      darkItemColor: '#fff',
      darkItemSelectedBg: '#1677ff9c'
    }
  }
}

export default function MyHeader () {
  const [defaultSelectedKeys] = useState(['2-2'])
  return (
    <ConfigProvider theme={themeConfig}>
      <div className='my-header'>
        <div className='logo'>
          <img src={require('../../assets/images/header/logo.png')} alt='' />
          <span>空间服务管理</span>
        </div>
        <div className='menu-and-user'>
          <Menu mode="horizontal" items={menuItems} theme="dark" defaultSelectedKeys={defaultSelectedKeys} />
          <Avatar src={require('../../assets/images/header/avatar.png')} />
        </div>
      </div>
    </ConfigProvider>
  )
}
